import React, {Component} from 'react';
import {Card, Row, Button} from 'antd';
import {connect} from 'react-redux';
import * as actions from '../../action/index';
import constant from '../../constant/index';
import PasswordEditor from './PasswordEditor';
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";

class PasswordModification extends Component {
    handleEditPasswordClick = () => {
        this.props.modifyEditPasswordStatus(constant.PASSWORD_EDIT_STATUS.EDIT);
    };

    renderPasswordInfo = () => (
        <div>
            <p id="modify-password-button"><FormattedMessage id='密码' />： {"*******"}</p>
            <Row>
                <Button type="primary" onClick={this.handleEditPasswordClick}><FormattedMessage id='修改密码' /></Button>
            </Row>
        </div>
    );

    render = () => {
        return (
            <Card noHovering={true} title={<FormattedMessage id='修改密码' />}>
                {this.props.passwordEditStatus ? <PasswordEditor /> : this.renderPasswordInfo()}
            </Card>
        )
    }
}

const mapStateToProps = state => ({
    passwordEditStatus: state.passwordEditStatus
});

const mapDispatchToProps = dispatch => ({
    modifyEditPasswordStatus: status => dispatch(actions.modifyEditPasswordStatus(status))
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PasswordModification))



